<template>
	<div class="index">
		<topheader></topheader>
		<div class="cont">
			<el-col :span="1">
				<span style="opacity: 0;">1</span>
			</el-col>
			<el-col :span="11">
				<div class="orderlist">
					<div class="invoice">
						<div class="content" id="content">
							<div class="order_title">
								<span>销售单</span>
								<div class="order_title_time">
									<span style="float: left;margin-left;color: red;">订单号：{{order_sn}}</span>
									<span style="float: right;">{{creates_time}}</span>
								</div>
								<div class="order_table" style="margin-top: 10px;">
									<el-table :data="tableData3" height="356" type="index" border highlight-current-row style="width: 620px;">
										<el-table-column label="项" width="35" type="index">
										</el-table-column>
										<el-table-column prop="goods_name" width="369" label="名称及规格">
										</el-table-column>
										<el-table-column prop="dawei" label="单位" width="60">
										</el-table-column>
										<el-table-column prop="goods_number" label="数量" width="60">
										</el-table-column>
										<el-table-column prop="shop_price" label="价格(￥)" width="75">
										</el-table-column>
									</el-table>
								</div>
							</div>
							<div class="price_nubmer">
								<div class="hj_nubmer">
									<span>合计:</span>
									<span style="color: red;font-size: 25px;">{{totanumber}}</span>
									<span>{{danwei}}</span>
								</div>
								<div class="hj_price">
									<span>￥{{totalprice}}</span>
								</div>
							</div>
						</div>
					</div>
					<div class="btnslist">
						<div class="od_btn_gu od_btn" v-on:click="set_order()">返回开单</div>
						<div class="od_btn_tui od_btn">退款</div>
					</div>
				</div>
			</el-col>
			<el-col :span="11">
				<div class="grid-content bg-purple-light">
					<div class="find_order_title">
						<span>查单</span>
					</div>
					<div style="padding: 10px;">
						<el-input placeholder="请输入订单号" v-model="input5" class="input-with-select">
							<el-button slot="append" icon="el-icon-search"></el-button>
						</el-input>
					</div>
					<div class="goodslist">
						<div class="goodsli" v-for="(data,index) in orderlist" v-on:click="pushgoods(index)">
							<span style="line-height: 35px;">{{data.creates_time}}</span>
						</div>
					</div>
					<div class="fenyebtn">
						<div class="upye" v-on:click="fenyeorder(0)">上一页</div>
						<div class="btoomye" v-on:click="fenyeorder(1)">下一页</div>
					</div>
				</div>
			</el-col>
			<el-col :span="1">
			</el-col>
		</div>
	</div>
</template>

<script>
	import Topheader from '../public/header.vue' //引入组件

	export default {
		components: {
			"topheader": Topheader
		},
		data() {
			return {
				order_sn: '', // 订单编号
				creates_time: '', //订单创建时间
				danwei: '', // 单位
				totalprice: '', //总价
				totanumber: '', //一共几项
				orderlist: '', // 订单列表
				start_time: '2018-03-07 13:31:00', //开始时间
				tableData3: [],
				total_pages: '', //存总页数
				now_date: '', //当前时间
				input5: '',
				page: 1, //当前第几页
				totanumber: '', //一共几项
				username: ''
			};
		},
		mounted() {
			this.getNowFormatDate()
			this.onload();
		},
		methods: {
			getNowFormatDate() {
				var now = new Date();
				var year = now.getFullYear(); //年  
				var month = now.getMonth() + 1; //月  
				var day = now.getDate(); //日  
				var hh = now.getHours(); //时  
				var mm = now.getMinutes(); //分  
				var ss = now.getSeconds(); //秒  
				var clock = year + "-";
				if(month < 10)
					clock += "0";
				clock += month + "-";
				if(day < 10)
					clock += "0";
				clock += day + " ";
				if(hh < 10)
					clock += "0";
				clock += hh + ":";
				if(mm < 10) clock += '0';
				clock += mm + ":";
				if(ss < 10) clock += '0';
				clock += ss;
				this.now_date = clock;
			},
			onload: function() {
				this.uin = this.getCookie("uin"); //uin
				this.token = this.getCookie("token"); //tokens
				this.shop_id = this.getCookie("shop_id"); //shop_id
				var aut = this.uin + "#" + this.token;
				//获取全部颜色列表
				this.$http.get('/test/public/index.php/cash/order_list.qdy?shop_id=' + this.shop_id + '&admin_uin=' + this.uin + '&order_type=1&start_time=' + this.start_time + '&end_time=' + this.now_date + '&page=' + this.page + '', {
					headers: {
						'Authorizations': aut
					},
					emulateJSON: true
				}).then(function(data) {
					console.log(data);
					this.orderlist = data.data.data.list;
					this.total_pages = data.data.data.total_pages; //一共多少页
				})
				this.username = this.getCookie("username");
			},
			//分页
			fenyeorder: function(type) {
				//				0上一页  1下一页
				
				if(type == 0 && this.page > 1) {
					this.page--;
					this.orderlists(this.page);
				} else if(type == 1 && this.page < this.total_pages) {
					this.page++;
					this.orderlists(this.page);
				} else {
					this.open3("暂时无数据!");
				}
			},
			orderlists: function(page) {
				this.uin = this.getCookie("uin"); //uin
				this.token = this.getCookie("token"); //tokens
				this.shop_id = this.getCookie("shop_id"); //shop_id
				var aut = this.uin + "#" + this.token;
				this.$http.get('/test/public/index.php/cash/order_list.qdy?shop_id=' + this.shop_id + '&admin_uin=' + this.uin + '&order_type=1&start_time=' + this.start_time + '&end_time=' + this.now_date + '&page=' + page + '', {
					headers: {
						'Authorizations': aut
					},
					emulateJSON: true
				}).then(function(data) {
					console.log(data);
					this.orderlist = data.data.data.list;
				})
			},
			//算合计 算金钱总额
			count: function() {
				this.totalarr = [];
				//数组求和
				function sum(arr) {
					var s = 0;
					for(var i = arr.length - 1; i >= 0; i--) {
						s += arr[i];
					}
					return s;
				}
				//乘法
				function accMul(arg1, arg2) {
					var m = 0,
						s1 = arg1.toString(),
						s2 = arg2.toString();
					try {
						m += s1.split(".")[1].length
					} catch(e) {}
					try {
						m += s2.split(".")[1].length
					} catch(e) {}
					return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
				}
				for(var i = 0; i < this.tableData3.length; i++) {
					this.totalarr.push(accMul(this.tableData3[i].goods_number, this.tableData3[i].shop_price));
				}
				this.totalprice = sum(this.totalarr);
			},
			//push good到arr
			pushgoods: function(index) {
				console.log(index);
				this.tableData3 = this.orderlist[index].goods;
				this.totanumber = this.tableData3.length;
				this.count();
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			//点击选中
			handleCurrentChange(val) {
				console.log(val)
				this.currentRow = val;
			},
			//删除
			setorderfun: function() {

			},
			//返回开单
			set_order: function() {
				this.$router.push({
					path: '/'
				})
			},
			open3: function(txt) {
				this.$notify({
					title: txt,
					duration: 2000,
					message: txt,
					type: 'warning'
				});
			},
			//读取cookie
			getCookie: function(cname) {
				var name = cname + "=";
				var ca = document.cookie.split(';');
				for(var i = 0; i < ca.length; i++) {
					var c = ca[i];
					while(c.charAt(0) == ' ') c = c.substring(1);
					if(c.indexOf(name) != -1) return c.substring(name.length, c.length);
				}
				return "";
			}
		}
	}
</script>

<style>
	.orderlist {
		position: relative;
		top: 0px;
		left: -500px;
		overflow: hidden;
		animation: orderlist 0.5s forwards;
	}
	
	@keyframes orderlist {
		from {
			left: -500px;
		}
		to {
			left: 0px;
		}
	}
	
	.setorderbtn {
		width: 80%;
		height: 50px;
		-webkit-box-shadow: inset 0 0 20px white;
		-moz-box-shadow: inset 0 0 20px white;
		box-shadow: inset 0 0 20px white;
		margin-left: 10%;
		color: white;
		font-size: 14px;
		text-align: center;
		line-height: 50px;
		margin-top: 15px;
		cursor: pointer;
	}
	
	.setorderbtn:hover {
		-webkit-box-shadow: inset 0 0 10px white;
		-moz-box-shadow: inset 0 0 10px white;
		box-shadow: inset 0 0 10px white;
	}
	
	.header>ul {
		border: none;
	}
	
	.setorder>.el-button--success {
		height: 50px;
		width: 80%;
		margin-top: 15px;
	}
	
	.fenyebtn {
		overflow: hidden;
		width: 100%;
		padding-top: 30px;
	}
	
	.goodslist {
		height: 380px;
		overflow: hidden;
	}
	
	.goodslist>.goodsli {
		float: left;
		margin: 5px 1%;
		width: 18%;
		height: 180px;
		background-color: #F2F2F2;
		border-radius: 5px;
	}
	
	.el-input-group--append,
	.el-input__inner {
		height: 60px;
	}
	
	.el-select .el-input {
		width: 130px;
	}
	
	.input-with-select .el-input-group__prepend {
		background-color: #fff;
	}
	
	.cont {
		overflow: hidden;
	}
	/*.is-active:hover {
		background-color: #067CF8;
	}*/
	
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		position: fixed;
		top: 0px;
		height: 100%;
		z-index: 10;
	}
	
	.el-menu-item span,
	.el-menu-item i {
		color: white;
	}
	
	.cashlogo {
		font-size: 40px;
		color: white;
		text-align: center;
		float: left;
		margin-left: 50px;
		margin-right: 50px;
		line-height: 80px;
	}
	
	.navbtn {
		float: right;
		margin-right: 50px;
		overflow: hidden;
	}
	
	.navbtn>li {
		float: left;
		width: 120px;
		height: 80px;
		line-height: 80px;
		color: white;
		font-size: 14px;
	}
	
	.navbtn>li:hover {
		/*font-size: 18px;*/
		background-color: rgba(0, 0, 0, 0);
	}
	
	.el-submenu__title {
		height: 80px;
		line-height: 80px;
		padding: 0 30px;
	}
	
	.el-submenu__title i {
		color: white;
	}
	
	.el-menu-item {
		padding: 0 30px;
	}
	
	.el-menu>li {
		width: 100%;
		text-align: center;
		height: 45px;
		line-height: 45px;
	}
	
	.fenyebtn>div {
		float: left;
		margin-left: 15px;
		margin-right: 35px;
		width: 100px;
		color: white;
		padding: 15px 35px;
		background-color: rgb(255, 255, 255, 0);
		-webkit-box-shadow: inset 0 0 20px white;
		-moz-box-shadow: inset 0 0 20px white;
		box-shadow: inset 0 0 20px white;
		cursor: pointer;
	}
	
	.fenyebtn>div:hover {
		-webkit-box-shadow: inset 0 0 10px white;
		-moz-box-shadow: inset 0 0 10px white;
		box-shadow: inset 0 0 10px white;
	}
</style>